<template>
    <div class="min-h-screen bg-gray-50 p-8">
        <div class="mx-auto max-w-7xl bg-white rounded-lg shadow-sm">
            <div class="p-8">
                <div class=" mx-auto py-8">
                    <div class="text-center mb-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-4">誤答記録</h2>
                    </div>
                    <div class="space-y-8">
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex space-x-4">
                                <el-button
                                    :class="{ 'text-custom border-b-2 border-custom': activeTab === 'all', 'text-gray-500':activeTab == 'all' }"
                                    @click="switchTab('all')" class="!rounded-button" text>全部記録</el-button>
                                <el-button
                                    :class="{ 'text-custom border-b-2 border-custom': activeTab === 'today', 'text-gray-500': activeTab == 'today' }"
                                    @click="switchTab('today')" class="!rounded-button" text>今日の間違い問題</el-button>
                            </div>
                            <div class="flex items-center space-x-4">
                                <el-select v-model="category_id" filterable placeholder="選択">
                                    <el-option v-for="item in subjects" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-input v-model="searchQuery" placeholder="検索" class="w-48" />
                                <el-button type="primary" @click="search">検索</el-button>
                                <el-button  @click="reset">リセット</el-button>
                            </div>
                        </div>

                        <el-table :data="tableData" style="width: 100%" empty-text="データなし">
                            <el-table-column prop="exercise_text" label="問題" width="300" />
                            <el-table-column prop="category_name" label="カテゴリー" width="100" />
                            <el-table-column prop="user_answer" label="回答" width="200" />
                            <el-table-column prop="answer_result" label="正解" width="200" />
                            <el-table-column label="操作時間">
                                <template slot-scope="scope">
                                    {{ getTime(scope.row.updated_at) }}
                                </template>

                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" @click="review(scope.row)">もう一度答える</el-button>
                                    <el-button type="primary" @click="viewDetail(scope.row)">詳細</el-button>

                                </template>
                             
                            </el-table-column>
                        </el-table>

                        <div class="px-6 py-4 flex items-center justify-between border-t">
                           
                            <el-pagination  @current-change="handleCurrentChange" background
                                :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"
                                :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { get,post } from "@/http/axios"
import tiemUtil from "@/utils/timeUtil"
export default {
    data() {
        return {
            activeTab: 'today',
            selectedSubject: 'all',
            searchQuery: '',
            currentPage: 1,
            pageSize: 10,
            category_id:null,
            total: 50,
            subjects: [],
            tableData: [
            ]
        };
    },
    mounted() {
        this.switchTab('today')
        this.getCateGory()
        this.getList(1)
    },

    methods: {
        review(row){
            this.$router.push({ path: "/exercise", query: { answer_id: row?.id, exercise_id: row?.exercise_id, id: row?.category_id, branch_id: row?.branch_id,hidden:true } })

        },
        async search(){
          await  this.getList(1)
        },
        async reset(){
            this.category_id=null
            this.searchQuery=''
           await this.getList(1)
        },
        getTime(date) {
            return tiemUtil(date)
        },
        async getCateGory() {
            let data = await get('/getCategoryList')
            this.subjects = data.data.data
        },
        async getList(page_num) {
            let str=""
            if(this.category_id){
                str+=`&category_id=${this.category_id}`
            }
            if(this.searchQuery){
                str+=`&exercises_name=${this.searchQuery}`
            }
            const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
            let data = await get(`/error_list?current_page=${ page_num}&status=${this.activeTab}${str}`)
            loading.close()
            this.tableData = data.data.data.list
            this.total = data.data.data.paginator.total_record
            this.currentPage = data.data.data.paginator.current_page
        },
        async switchTab(tab) {
            this.activeTab = tab;
           await this.getList(1)
        },

        async viewDetail(row) {
            sessionStorage.removeItem("answer")
            sessionStorage.setItem("answer", JSON.stringify({ ...row}))
            this.$router.push({ path: "/answer_sub", query: { detail:true} })
        },
 
       async handleCurrentChange(val) {
           await this.getList(val)
        }
    }
};
</script>

<style>
.el-button.el-button--text {
    padding: 0.5rem 1rem;
}
.el-button:focus, .el-button:hover {
    color: #409EFF !important;
    border-color: #c6e2ff !important;
    background-color: #ecf5ff !important;
}
.text-gray-500{
    color: #409EFF !important;
    border-color: #c6e2ff !important;
    background-color: #ecf5ff !important;
}
.border-custom {
    border-color: var(--el-color-primary);
}
.el-select{
    width: 20rem;
}
.text-custom {
    color: var(--el-color-primary);
}
</style>